<template>
  <absolute-container class="p-[20px]">
    <page-main
      class="table_tree flex h-full flex-col rounded-[4px] bg-[#fff] px-[16px] pb-0 pt-[16px]"
      style="box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08)"
    >
      <QueryForm
        ref="refQueryForm"
        :getDataList="getDataList"
        @addDetailDrawer="addDetailDrawer"
        @isExpand="isExpand"
      ></QueryForm>
      <div class="el-form-item">
        <t-button svgIcon="ic-btn-add" @click="addDetailDrawer">新增</t-button>
        <t-button
          :svgIcon="tableIndex % 2 == 0 ? 'workbench_menu_open' : 'workbench_menu_stow'"
          class="exportClass"
          @click="isExpand"
          >{{ tableIndex % 2 == 0 ? "折叠" : "展开" }}</t-button
        >
        <t-button svgIcon="login_icon_refresh" class="exportClass" @click="refresh">刷 新</t-button>
      </div>
      <el-table
        :key="tableIndex"
        height="500px"
        :data="dataList"
        row-key="id"
        :tree-props="{ children: 'children' }"
        :expand-row-keys="expandRowKeys"
      >
        <el-table-column
          :prop="PROPS.name"
          :label="LABELS.name"
          align="left"
          class-name="table-item-left"
          min-width="180"
        />
        <el-table-column :prop="PROPS.type" :label="LABELS.type" align="left" min-width="180">
          <template #default="{ row, $index }">
            <div class="flex items-center">
              {{ row[PROPS.type] == "MENU" ? "菜单" : "按钮" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="LABELS.icon" align="left" min-width="180">
          <template #default="{ row, $index }">
            <div class="flex items-center">
              <IconPicker v-if="row[PROPS.icon]" v-model="row[PROPS.icon]" :disabled="true"></IconPicker>
            </div>
          </template>
        </el-table-column>
        <el-table-column :prop="PROPS.route" :label="LABELS.route" min-width="320" align="left" />
        <el-table-column :prop="PROPS.sort" :label="LABELS.sort" align="left" min-width="180" />
        <el-table-column :prop="PROPS.status" :label="LABELS.status" min-width="180">
          <template #default="{ row }">
            <div v-if="$store.state.data.KV_MAP[OPTION_KEYS.status][row.status]" class="flex items-center">
              <div
                class="mr-[8px] h-[6px] w-[6px] flex-shrink-0"
                style="border-radius: 50%"
                :class="[
                  $store.state.data.KV_MAP[OPTION_KEYS.status][row.status] == '启用' ? 'bg-[#1D7FF2]' : 'bg-[#ed7b2f]',
                ]"
              ></div>
              {{ $store.state.data.KV_MAP[OPTION_KEYS.status][row.status] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column class-name="!px-[0px]" label="操作" align="left" width="100" fixed="right">
          <template #default="{ row }">
            <div class="space-x-[12px]">
              <span class="cursor-pointer text-[#1D7FF2]" @click="onEdit(row)">编辑</span>
              <span class="color-danger cursor-pointer" @click="onDel(row)">删除</span>
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <t-empty-data />
        </template>
      </el-table>
      <!--      <div class="addShadow relative -left-[16px] -top-[1px] z-50 w-[calc(100%+32px)]"> -->
      <!--        <el-pagination -->
      <!--          :current-page="pagination.page" -->
      <!--          :total="pagination.total" -->
      <!--          :page-size="pagination.size" -->
      <!--          :page-sizes="pagination.sizes" -->
      <!--          :layout="pagination.layout" -->
      <!--          :hide-on-single-page="false" -->
      <!--          background -->
      <!--          @size-change="onSizeChange" -->
      <!--          @current-change="onCurrentChange" -->
      <!--        /> -->
      <!--      </div> -->
    </page-main>

    <DetailDrawer :id="id" v-model="drawerVisible" @onSubmit="onSubmit" />
  </absolute-container>
</template>

<script>
import paginationMixin from "./components/pagination";
import config from "./config";
import QueryForm from "./components/QueryForm.vue";
import DetailDrawer from "./components/DetailDrawer.vue";
import tableMixin from "@/mixin/table";
import { convertToTree } from "@/util";
import IconPicker from "@/components/IconPicker";
import {
  systemPermissionAdd,
  systemPermissionDelete,
  systemPermissionList,
  systemPermissionUpdate,
} from "@/api/permission";

export default {
  name: "MenuMgmt",
  components: { DetailDrawer, QueryForm, IconPicker },
  mixins: [paginationMixin, tableMixin],
  inject: ["reload"],
  data() {
    return {
      ...config,
      expandRowKeys: [],
      id: 1, //布尔为true均代表详情
      dataList: [],
      dataListInit: [],
      tableIndex: 1,
      drawerVisible: false,
    };
  },
  computed: {},
  mounted() {
    this.getDataList();
    console.log(this.$router);
  },
  methods: {
    getDataList(param) {
      const obj = { ENABLE: "1", DISABLE: "0" };
      const status = this.getParams(param).status ? obj[this.getParams(param).status] : null;
      systemPermissionList({ ...this.getParams(param), status, length: 10000 }).then((res) => {
        this.dataListInit = [...res.content];
        this.pagination.total = res.totalElements;
        if (res.content?.length) {
          this.dataList = convertToTree(res.content);
        } else {
          this.dataList = res.content;
        }
        console.log(this.dataList);
      });
    },
    addDetailDrawer() {
      this.id = 0; //false代表新增
      this.drawerVisible = true;
    },
    isExpand() {
      this.tableIndex++;
      if (this.expandRowKeys.length) {
        this.expandRowKeys = [];
      } else {
        this.expandRowKeys = this.dataListInit.map((item) => item.id);
      }
    },
    onEdit(row) {
      this.id = row.id;
      this.drawerVisible = true;
    },
    async onDel(row) {
      try {
        await this.$confirm(`确定删除「${row["name"]}」吗？`, "确认信息", {
          type: "warning",
          cancelButtonClass: "common-confirm-cancel-btn",
          confirmButtonClass: "common-confirm-confirm-btn",
        });
        try {
          await systemPermissionDelete({ id: row.id });
          this.onFinsh();
        } catch (e) {
          //no-op
        }
      } catch {
        this.$message.warning("已取消删除");
      }
    },
    async onSubmit(value) {
      if (this.id) {
        value.image = value.image && value.image.length > 0 ? value.image[0]["id"] : null;
        //编辑
        await systemPermissionUpdate(value);
      } else {
        value.image = value.image && value.image.length > 0 ? value.image[0]["id"] : null;
        //新增
        await systemPermissionAdd(value);
      }
      this.onFinsh(true);
    },
    onFinsh(value) {
      //value有值代表需要重置分页参数
      this.$message.success({
        message: "操作成功",
      });
      this.getDataList(value);
      this.drawerVisible = false;
    },
    refresh() {
      this.$store.commit("menu/updataRoutes");
      this.reload(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.addShadow {
  display: inline-flex;
  justify-content: flex-end;
  height: 68px;
  padding: 16px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 -1px 4px 0 rgb(0 0 0 / 0.08);
}
</style>

<style media="printContent">
@page {
  margin: 0 auto;
  size: auto;
}
</style>
